<template>
  <div class="outside-box" ref="outsideBox">
    <div class="data-item-box" ref="dataItemBox">
      <div class="data-item-data-one" ref="dataItemDataOne">
        <div class="data-item" v-for="item in 15" :key="item">
          这是第{{ item }}条数据
        </div>
      </div>

      <div>
        <div class="data-item" v-for="item in 15" :key="item">
          这是第{{ item }}条数据
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const dataItemBox = ref(null)
const outsideBox = ref(null)
const dataItemDataOne = ref(null)

onMounted(() => {
  window.requestAnimationFrame(reqAnimationFrame)
})

const vallidateStr = (str) => {
  return Math.abs(str.slice(0, -2) - 0)
}

let scrollY = 0;
const speed = 1;
const reqAnimationFrame = () => {
  const dataItemDataOneStyles = getComputedStyle(dataItemDataOne.value)

  scrollY += speed
  dataItemBox.value.style.top = `-${scrollY}px`

  if (vallidateStr(dataItemBox.value.style.top) > vallidateStr(dataItemDataOneStyles.height)) {
    scrollY = 0
    window.requestAnimationFrame(reqAnimationFrame)
  } else {
    window.requestAnimationFrame(reqAnimationFrame)
  }
}
</script>

<style lang="less" scoped>
.outside-box {
  position: relative;
  width: 200px;
  height: 400px;
  border: 2px solid #000;
  overflow: hidden;
}

.data-item-box {
  position: absolute;
  width: 200px;
  height: auto;
  min-height: 50px;
  box-sizing: border-box;
}

.data-item {
  width: 200px;
  height: 50px;
  border: 1px solid skyblue;
  box-sizing: border-box;
  line-height: 50px;
  text-align: center;
}
</style>